<meta charset="UTF-8">
<div id="trip-report">
    <div class="demo-spin-container" v-if="isSpin">
        <Spin size="large" fix></Spin>
    </div>
    <div class="report-item-header">
        <div style="margin:10px;height: 32px;">
            <div class="fl">
                <div style="height: 32px; line-height: 32px;">{{$t("reportForm.selectDev")}}:&nbsp;</div>
            </div>
            <div style="position: relative;width: 240px;" class="fl">
                <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                    <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" :placeholder="placeholder" @on-click="onClickIcon"></i-input>
                    <transition name="fade">
                        <div class="search-item-wrapper" v-show="isShowMatchDev">
                            <ul id="ztree" class="ztree"></ul>
                        </div>
                    </transition>
                </div>
            </div>
            <div style="margin-left:10px;" class="fl">
                {{$t("reportForm.selected")}}: <span v-text="selectedCount"></span>
            </div>
            <div style="padding-left: 10px;" class="fl">
                <span>{{$t("reportForm.selectTime")}}:</span>
                <date-picker type="daterange" :value="dateVal" :editable="false" :clearable="false" @on-change="onChange" show-week-numbers style="width:180px" placement="bottom-start"></date-picker>
            </div>
            <div style="height: 32px; line-height: 32px;margin-left: 10px;" class="spans-wrap fl">
                <span class="cursor-pointer" @click="handleSelectdDate(0)" :style="{color: dayNumberType == 0 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.toDay")}}</span> <b>｜</b>
                <span class="cursor-pointer" @click="handleSelectdDate(1)" :style="{color: dayNumberType == 1 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.yesterDay")}}</span> <b>｜</b>
                <span class="cursor-pointer" @click="handleSelectdDate(3)" :style="{color: dayNumberType == 3 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.threeDays")}}</span>
            </div>
            <div style="margin-left:10px;" class="rt">
                <i-button @click="exportData" type="primary">{{$t("reportForm.exportData")}}</i-button>
            </div>
        </div>
        <div style="margin:10px;height: 32px;">
            <div class="fl">
                {{$t("reportForm.tripSetting")}}:&nbsp;
            </div>
            <div class="fl">
                <el-dropdown trigger="click" @command="onClickDropdownMenu">
                    <div class="el-button el-button--small el-dropdown-selfdefine" style="width: 240px;text-align: left;">
                        <img :src="tripSettingSrc" style="width: 20px;height: 10px;"> {{tripSettingStr}}
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="0"><img src="images/tripin.png" style="width: 36px;height: 18px;margin-right: 4px;">{{$t("reportForm.tripRule1")}}</el-dropdown-item>
                        <el-dropdown-item command="1"><img src="images/tripinout.png" style="width: 36px;height: 18px;margin-right: 4px;">{{$t("reportForm.tripRule2")}}</el-dropdown-item>
                        <el-dropdown-item command="2"><img src="images/tripinoutin.png" style="width: 36px;height: 18px;margin-right: 4px;">{{$t("reportForm.tripRule3")}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
            <div style="margin-left:10px;" class="fl">
                {{$t("reportForm.deliveryArea")}}&nbsp;
            </div>
            <div style="width: 200px;float: left;">
                <dropdown-tree :tree-data="treeData" @on-select="onSelectStartUuid"></dropdown-tree>
            </div>
            <div style="margin-left:10px;" class="fl" v-show="tripSetting!=='0'">
                {{$t("reportForm.ReceivingArea")}}&nbsp;
            </div>
            <div style="width: 200px;float: left;" v-show="tripSetting!=='0'">
                <dropdown-tree :tree-data="treeData" @on-select="onSelectEndUuid"></dropdown-tree>
            </div>
            <div style="margin-left:10px;" class="fl">
                <i-button @click="onClickQuery">{{$t("reportForm.query")}}</i-button>
            </div>
        </div>
        <div style="margin:10px;">
            <Tabs :value="activeTab" @on-click="onClickTab">
                <Tab-pane :label="$t('reportForm.tripStatistics')" name="tabTotal">
                    <i-table ref="table" :columns="columns" size="small" :height="tableHeight" :data="tableData" :loading="loading"></i-table>
                </Tab-pane>
                <Tab-pane :label="$t('reportForm.tripDetails')" name="tabDetail">
                    <i-table ref="detail" :columns="columnsDetails" size="small" highlight-row :height="tableHeight/2" @on-row-click="querySingleDevTracks" :data="tableDataDetails"></i-table>
                    <div :style="{height:tableHeight/2+'px',marginTop:'10px',position:'relative'}">
                        <div style="position: absolute;left: 0px;bottom:0px;top: 0px;width: 40%;padding-right: 10px;">
                            <div class="full" style="border: 1px solid #E8EAEC;">
                                <div id="trip-map" class="full"></div>
                            </div>
                        </div>
                        <div style="position: absolute;right: 0px;top: 0px;width: 60%;bottom: 0px;">
                            <div class="full" style="border: 1px solid #E8EAEC;">
                                <div id="leak-charts" :style="{height:tableHeight/2+'px'}"></div>
                            </div>
                        </div>
                    </div>
                </Tab-pane>
            </Tabs>
        </div>
    </div>
</div>